<template>
  <div class="pieAndTable">
    <div class="tableBox fl">
      <el-row class="tables">
        <!-- 表格 头部 -->
        <el-row class="tableTh">
          <el-col :span="5">
            <span>设备名称</span>
          </el-col>
          <el-col :span="5">
            <span>设备编号</span>
          </el-col>
          <el-col :span="6">
            <span>报修原因</span>
          </el-col>
          <el-col :span="5">
            <span>报修时间</span>
          </el-col>
          <el-col :span="4">
            <span>维修状态</span>
          </el-col>
        </el-row>
        <!-- 表格行 -->
        <div v-if="tableData.length > 0" class="showDiv">
          <el-row v-for="(item,index) in tableData" :key="item.id" class="tableTd">
            <el-col :span="5">
              <span>{{ item.equipName }}</span>
            </el-col>
            <el-col :span="5">
              <span>{{ item.equipCode }}</span>
            </el-col>
            <el-col :span="6" style="text-align:left;">
              <span>{{ item.classifyName }}</span>
            </el-col>
            <el-col :span="5">
              <span>{{ item.applyTime }}</span>
            </el-col>
            <el-col :span="4">
              <span v-if="item.statusStr === '待处理'" class="red">待处理</span>
              <span v-else-if="item.statusStr === '待验收'" class="blue">待验收</span>
              <span v-else-if="item.statusStr === '维修中'" class="yellow">维修中</span>
              <span v-else class="green">已完成</span>
            </el-col>
          </el-row>
        </div>
        <div v-else class="kong">暂无数据</div>
      </el-row>
    </div>
    <div class="pieBox fl">
      <div v-if="data.length > 0" id="abnormalPie" class="allWidthHeight" />
      <div v-else class="kong">暂无数据</div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      tableData: [],
      myChart: null,
      data: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    async getInfo() {
      const res = await this.$axios.get('/board/internetData/equipAbnormal')
      if (res?.data.code === 200) {
        this.tableData = res.data.data
      }
      const res2 = await this.$axios.get('/board/internetData/equipAbnormalPie')
      if (res2?.data.code === 200) {
        this.data = res2.data.data
        setTimeout(() => {
          this.setAbnormalPie(res2.data.data)
        }, 500)
      }
    },
    /* echarts */
    setAbnormalPie(data) {
      let colorList = [
        '#407FFE',
        '#E05967',
        '#00CBCE',
        '#F29961',
        'rgba(84,121,6)'
      ]
      let arr = []
      let name = []
      data.forEach((item) => {
        name.push(item.classifyName)
        let obj = {
          value: item.num,
          name: item.classifyName,
          itemStyle: {
            color: colorList[item]
          },
          label: {
            color: '#fff',
            fontSize: '10px'
          }
        }
        arr.push(obj)
      })
      const option = {
        legend: {
          orient: 'vertical',
          data: name,
          formatter: function (name) {
            if (name.length > 5) {
              // 假设超过5个字符时显示点点
              return name.substring(0, 5) + '...'
            } else {
              return name
            }
          },
          top: 'middle',
          right: '0',
          width: '100px',
          textStyle: {
            fontSize: '14px',
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 10, // 设置图例标记的图形宽度
          itemHeight: 10 // 设置图例标记的图形高度
        },
        series: [
          {
            type: 'pie',
            radius: '75%',
            center: ['35%', '50%'],
            legendHoverLink: false,
            data: arr,
            label: {
              show: true, // 显示数值
              position: 'inside', // 数值显示的位置，'outside' 表示在扇区外侧
              formatter: '{c}' // 数值的格式，{b} 是数据名，{c} 是数值，{d} 是百分比
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('abnormalPie'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.row-striped {
  background-color: rgba(255, 255, 255, 0.5); /* 背景色可以根据需要自定义 */
}
.red {
  color: red;
}
.blue {
  color: #4a9fe2;
}
.green {
  color: #00ff00;
}
.yellow {
  color: #ff931e;
}
.pieAndTable {
  height: calc(100% - 65px);
}
.pieBox {
  width: 40%;
  height: 100%;
}
.tableBox {
  width: 60%;
  height: 100%;
  .tables {
    height: 100%;
    color: #fff;
    background: none;
    margin: 0 10px;
    .showDiv {
      height: 85%;
    }
    .tableTh,
    .tableTd {
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-col {
        text-overflow: ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
        white-space: nowrap; /*让文字不换行*/
        overflow: hidden; /*超出要隐藏*/
      }
    }
    .tableTh {
      width: 100%;
      height: 15%;
      // font-weight: bold;
      font-size: 12px;
      background: rgba(0, 255, 255, 0.5);
      color: #ceffff;
    }
    .tableTd {
      height: 16.666666%;
      font-size: 12px;
      border-bottom: 1px solid #fff;
      // font-weight: bold;
    }
    .kong {
      height: calc(100% - 65px);
      // background: url(../../../../assets/images/zwsj.png) no-repeat center;
      background-size: 50% auto;
      display: flex;
      align-items: center;
      justify-content: center; /*定义body的里的元素水平居中*/
      color: #fff;
      font-size: 0.8vw;
    }
  }
}
</style>
